<template>
  <div>
    <el-form v-loading="loading" ref="pram" :model="pram" :rules="rules" label-width="120px" @submit.native.prevent>
      <el-form-item label="标题" prop="title">
        <el-input v-model="pram.title" maxlength="20" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="视频" prop="videoUrl">
        <el-input v-model="pram.videoUrl" maxlength="20" placeholder="请输入视频地址或上传视频" />
        <el-button size="mini" icon="el-icon-picture" type="primary" @click="handleShow">点击选择视频</el-button>
      </el-form-item>
      <el-form-item label="视频类型" prop="pram.videoType">
        <el-select v-model="pram.videoType" placeholder="请选择">
          <el-option v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input v-model.number="pram.sort" type="number" maxlength="3" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="显示" prop="status">
        <el-switch :active-value="1" :inactive-value="0" v-model="pram.status"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')">{{ isCreate===0?'确定':'更新' }}</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="上传图片"
      :visible.sync="showChooseImage"
      width="896px"
      :before-close="handleClose"
      :modal="false"
    >
      <upload-index v-if="showChooseImage" :checkedMore="imageList" :isMore="'1'" @getImage="getImage" />
    </el-dialog>
  </div>
</template>

<script>
import {
  save,
  insertDaMeiSuZhou
} from '@/api/video'
import { Debounce } from '@/utils/validate'

export default {
  name: "VideoEdit",
  props: {
    isCreate: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: null
    },
  },
  data() {
    return {
      options: [{
          value: '1',
          label: '大美肃州视频'
        }, {
          value: '2',
          label: '十大视频'
        }],
      showChooseImage:false,
      loading:false,
      imageList:[],
      pram: {
        id: 0,
        title:'',
        videoUrl:'',
        sort:0,
        status:1,
        type:1,
      },
      rules: {
        title: { required: true, message: '请填写标题', trigger: ['blur'] },
        videoUrl: { required: true, message: '请输入视频地址或上传视频', trigger: ['blur'] },
        sort: { required: true, message: '请填写排序', trigger: ['blur'] },
      },
    }
  },
  mounted() {
    this.initEditData();
  },
  methods: {
    handleClose(){
      this.showChooseImage=false
    },
    handleShow(){
      this.showChooseImage=true;
    },
    getImage(img) {
      this.pram.videoUrl=img[0].attDir;
      this.showChooseImage = false
    },
    close() {
      this.$emit('hideEditDialog')
    },
    initEditData() {
      if (this.isCreate !== 1) return //不是编辑页，即新增页则直接返回
      const {  id,title,videoUrl,sort,status} = this.editData
      this.pram.id=id;
      this.pram.title=title;
      this.pram.videoUrl=videoUrl;
      this.pram.sort=sort;
      this.pram.status=status;
    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        this.loading=true;
        save(this.pram).then(data => {
          this.$message.success('保存成功')
          this.$emit('hideEditDialog')
        }).finally(()=>{
          this.loading=false;
        })
      })
    }),
  }
}
</script>
